import { useState, useEffect } from 'react'
import TextLoop from "react-text-loop";
import dayjs from 'dayjs';
import './index.less';
// import noticePng from './notice.png'
import { Button } from 'antd';
import { DoubleRightOutlined, RightOutlined } from '@ant-design/icons';
import MoreInfo from './MoreInfo';
import JcyjApi from '../../../../../../utils/apis/JcyjApi';
import './index.less';
import { createLayer, dataToFeature } from '../../../../../../utils/helper/mapHelper';
import { resourcePath } from '../../../../../../utils/resource';
import { Icon, Style } from 'ol/style';
import useMap from '../hooks/useMap';
import WarningDetail from './WarningDetail';

export default function LoopMsg(props) {
    const [msgItems, setMsgItems] = useState();
    const map = useMap();
    const [visible, setVisible] = useState();
    const [currentDelItem, setCurrentDelItem] = useState();
    const [data, setData] = useState('1');

    //这里面的注释代码是尝试将预警信息显示在地图上，如何实现对预警信息点击触发操作
    useEffect(() => {
        if (map) {
            JcyjApi.yjmsgs().then(resp => {
                console.log('预警信息', resp);
                setMsgItems(resp.rows);
                let dtuLayer;
                const features = resp.rows?.filter(row => {
                    return row.geom
                })?.map(item => {
                    return dataToFeature(item)
                })

                dtuLayer = createLayer((feature) => {
                    return new Style({
                        image: new Icon({
                            src: resourcePath.mapIcons.yjxx_red,
                            scale: 0.7,
                            anchor: [0.5, 1]
                            // size: [60, 98],
                            // scale: 1 / 24
                        })
                    })
                }, features?.filter(feature => feature.get('isfb') === "1") || []);
                dtuLayer.set('layerName', 'yjxx');
                dtuLayer.set('type', `hongs`)
                dtuLayer.setZIndex(9999)
                map.addLayer(dtuLayer)
                // map.dispatchEvent({
                //     type: 'legend-base-layer',
                //     title: '预警信息',
                //     layer: dtuLayer
                // })
            })
        }
    }, [map, visible])

    useEffect(() => {
        if (map) {
            const handler = evt => {

                console.log("点击了我", evt)
                const features = map.getFeaturesAtPixel(evt.pixel);
                console.log("features", features)
                const item = features?.find(feature => feature.get('jbys'))?.getProperties();
                if (item) {
                    map.dispatchEvent({
                        type: 'detail.show',
                        title: '预警信息',
                        component: <WarningDetail item={item} />
                    })
                }

            }
            map.on('singleclick', handler);

            return () => {
                map.un('singleclick', handler);
            }
        }
    }, [map])

    return <>
        <div className='loop-msg layout-h center'>
            <div className='loop-msg-title layout-h center j-center'>
                {/* <img src={noticePng} alt="消息通知" /> */}
                <div style={{
                    paddingLeft: 10,
                    paddingBottom: 3
                }}>预警消息</div>
            </div>
            <div className='fill w0'>
                {msgItems && <TextLoop className="loop-msg-content wh100">
                    {msgItems?.map((item, i) => {
                        let color = 'red';
                        switch (item.jbys) {
                            case "4": color = '#0ff';
                                break;
                            case "3": color = 'yellow';
                                break;
                            case "2": color = 'orange';
                                break;
                            case "1": color = 'red';
                                break;
                            default:
                                return null;
                        }
                        return <div key={i} className="layout-h center">
                            <span className='msg-type' style={{
                                color
                            }}>【{item.yhlb}】</span>
                            <span className='fill w0' style={{
                                // whiteSpace: 'nowrap',
                                overflow: 'hidden',
                                textOverflow: 'ellipsis',
                            }} title={item.yjbt}>{item.yjbt}</span>
                            <span>{item.createTime}</span>
                        </div>
                    })}
                </TextLoop>}
            </div>
            <div>
                <Button type="link" style={{
                    color: "#00ffff"
                }} onClick={e => {
                    setVisible(true)
                }}>
                    <span>更多<DoubleRightOutlined /></span>

                </Button>
            </div>
            {visible && <MoreInfo onClose={e => setVisible(false)} onTjfx={type => {
                console.log(type)
            }} currentDelItem={currentDelItem} setCurrentDelItem={setCurrentDelItem} setData={setData} data={data} />}
        </div>

    </>;
}